<template>
	<div class="footprint">
		<myNavbar title="足迹"></myNavbar>
		<list v-if="footprintList.length >0">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
				:display="refreshing ? 'show' : 'hide'">
				<text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell>
				<div class="footprint-list" v-for="item in footprintList">
					<div><text class="footprint-list-date">{{item.date}}</text></div>
					<div class="footprint-productList">
						<div v-for="item1 in item.footprintProductList">
							<div class="footprint-productList-item" @click="selectItem(item1.id,item1.state)">
								<div style="position: relative;">
									<image :src="item1.thumbnail"
										style="width: 225px;height: 225px;border-radius: 16px"></image>
									<div v-if="item1.state==false" class="footprint-productList-item-no">
										<text style="font-size: 32px;color: white;font-weight: 700;">已下架</text>
									</div>
								</div>
								<text class="footprint-productList-item-bottom">￥{{item1.price}}</text>
							</div>
						</div>
					</div>
				</div>
				<div style="height: 80px"></div>
			</cell>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<text class="indicator-text">加载中...</text>
			</loading>
		</list>
		<div class="footprint-none" v-if="footprintList.length==0">
			<image class="footprint-none-image "
				src="https://rzico.oss-cn-shenzhen.aliyuncs.com/none-data/kongneirong.png"></image>
			<text class="footprint-none-text">您还没有相关的足迹</text>
			<text style="font-size: 24px;color: #B0ADBC;margin-top:10px">赶紧去看看有哪些想买的吧</text>
			<div @click="goShopping" class="favorite-none-button">
				<text style="color: white;font-size: 32px;">去逛逛</text>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		list
	} from '../../../api/trace'
	const eeui = app.requireModule('eeui');
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		name: 'footprint',
		data() {
			return {
				pageNum: 1,
				pageSize: 20,
				createDateList: [], //日期的数组
				footprintList: [],
				loadinging: false,
				refreshing: false,
				refreshTitle: '释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.getFootprintData()
		},
		components: {
			myNavbar
		},
		methods: {
			onloading(event) {
				this.loadinging = true
				setTimeout(() => {
					this.loadinging = false
					this.pageNum += 1
					this.getFootprintData()
				}, 1000)
			},
			onrefresh(event) {
				this.refreshing = true
				this.refreshTitle = '加载中...'
				setTimeout(() => {
					this.pageNum = 1
					this.refreshing = false
					this.getFootprintData()
				}, 1000)
			},
			onpullingdown(event) {
				this.refreshTitle = '释放刷新页面...'
			},
			//获取足迹信息
			getFootprintData(callback) {
				if (this.pageNum == 1) {
					this.footprintList = []
				}
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				list(data).then(
					res => {
						console.info(res)
						if (res.type == 'success') {
							if (res.data.data.length > 0) {
								this.formateFootprintData(res.data.data)
							} else {
								// eeui.alert('没有更多足迹', function() {});
							}
							if (callback) {
								callback(res.data.data)
							}
						}
					}
				).catch(error => {
					console.log(error)
				})
			},

			selectItem(id, state) {
				if (state) {
					eeui.openPage({
						url: 'root://pages/goods/product/details.js',
						params: id,
						statusBarType: 'immersion',
						statusBarStyle: false
					})
				} else {
					console.info("无效商品商品被点击了")
				}


			},
			formatDate2day(val) {
				let date = new Date(val);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			},
			goShopping() {
				eeui.openPage({
					url: 'root://pages/index.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			//足迹数据初始化
			formateFootprintData(data) {
				let footprintList = this.footprintList
				let createDateList = []
				let addFootprintList = []
				if (data.length > 0) {
					data.map((item) => {
						createDateList.push(item.createDate)
					})

					createDateList = Array.from(new Set(createDateList)) //去重
					if (createDateList.length > 0) {
						createDateList.map((item) => {
							let footprintListItem = {}
							footprintListItem.createDate = item
							footprintListItem.date = this.formatDate2day(item)
							footprintListItem.footprintProductList = []
							data.map((item1) => {
								if (item1.createDate == item) {
									let footprintProductListItem = {}
									footprintProductListItem.id = item1.id
									footprintProductListItem.name = item1.name
									footprintProductListItem.thumbnail = this.thumbnail(item1.thumbnail,
										225, 225)
									footprintProductListItem.price = item1.price
									footprintProductListItem.state = true
									if (item1.stock == 0) {
										footprintProductListItem.tag = "缺货"
										footprintProductListItem.state = false
									}
									if (item1.isMarketable == false) {
										footprintProductListItem.tag = "下架"
										footprintProductListItem.state = false
									}
									footprintListItem.footprintProductList.push(footprintProductListItem)
								}
							})
							addFootprintList.push(footprintListItem)
						})
						if (addFootprintList.length > 0) {
							addFootprintList.map((item) => {
								let checkOff = false //检查是不是同一天的足迹
								footprintList.map((item1) => {
									if (item.createDate == item1.createDate) {
										checkOff = true
										item.footprintProductList.map(item2 => {
											item1.footprintProductList.push(item2)
										})
									}
								})
								if (!checkOff) {
									footprintList.push(item)
								}
							})
						}
					}

				}
			},
		},
	}
</script>

<style scoped>
	.footprint {
		flex: 1;
		background-color: rgba(248, 248, 248, 0.8);
	}

	.footprint-list {
		width: 750px;
		flex: 1;
		margin-top: 20px;
		/* margin-left: 25px; */
	}

	.refresh {
		height: 60px;
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.favorite-none-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 338px;
		height: 82px;
		margin-top: 30px;
		background-color: rgba(227, 93, 87, 1);
		border-radius: 8px;
	}

	.loading {
		justify-content: center;
		height: 50px;
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		flex-direction: row;
		align-items: center;
	}

	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;

	}

	.footprint-list-date {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28px;
		font-weight: 700;
		margin-left: 30px;
	}

	.navbar {
		width: 750px;
		height: 100px;
		margin-bottom: 20px;
	}

	.footprint-productList {
		width: 750px;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 15px;
		/* padding-right: 15px; */
		/* background-color: red; */
	}

	.footprint-productList-item {
		align-content: center;
		margin-top: 30px;
		margin-right: 20px;
		border-radius: 16px;
		position: relative;
	}

	.mask {

		opacity: 0.5;
	}

	.footprint-productList-item-tag {
		position: absolute;
		background-image: linear-gradient(to bottom, rgb(189, 191, 198, 1), rgba(214, 215, 216, 1));
		padding: 2px;
		width: 100px;
		right: 5px;
		border-color: rgba(200, 200, 212, 0.6);
		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		letter-spacing: 2px;
	}

	.footprint-productList-item-tag_div {
		padding: 8px 12px;
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		border-radius: 1px;
	}

	.footprint-productName {
		font-size: 24px;
		font-weight: 400;
		height: 72px;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		padding: 0 15px;
	}

	.footprint-productList-item-bottom {
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 32px;
		font-weight: bold;
		color: rgba(227, 93, 87, 1);
		justify-content: space-between;
		margin-top: 10px;
		margin-left: 5px;
	}

	/* .footprint-productList-item-bottom {
		font-size: 25px;
	} */

	.delete {
		color: grey;
		width: 30px;
		height: 30px;
		font-size: 30px;
		/* padding: 5px; */
		border-radius: 6px;
	}

	.footprint-none {
		width: 750px;
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
	}

	.footprint-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 200px;
		height: 200px;
	}

	.footprint-none-text {
		text-align: center;
		letter-spacing: 5px;
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42px;
		margin-top: 30px;
	}

	.footprint-none-button {
		font-size: 32px;
		display: block;
		height: 82px;
		margin-top: 30px;
		background-image: linear-gradient(to top, #FF560C, #FE8003);
		border-radius: 16px;
		letter-spacing: 5px;
	}

	.footprint-productList-item-no {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 16px;
	}

	.indicator-text {
		color: #888888;
		font-size: 22px;
		text-align: center;
		padding-top: 20px;
	}
</style>
